<template>
  <!-- 完赛排行 -->
  <div>
    <el-form class="pageWrap">
      <!-- <el-form-item label="报名日期" class="noBot"></el-form-item> -->
      <el-form-item label="赛事组别" class="noBot">
        <span
          :class="['span',gId==v.id?'active':'']"
          v-for="(v,i) in groupArr"
          :key="i"
          @click="gId=v.id;getPlayers()"
        >{{v.name}}</span>
      </el-form-item>
      <el-form-item label="完赛状态" class="noBot">
        <span
          :class="['span',state==v.state?'active':'']"
          v-for="(v,i) in stateArr"
          :key="i"
          @click="state=v.state;getPlayers()"
        >{{v.name}}</span>
      </el-form-item>
      <el-form-item label="性别" class="noBot">
        <span
          :class="['span',sex==v.val?'active':'']"
          v-for="(v,i) in sexArr"
          :key="i"
          @click="sex=v.val;getPlayers()"
        >{{v.name}}</span>
      </el-form-item>
    </el-form>
    <el-row class="pageWrap conmsg">
      <el-form :inline="true">
        <el-form-item class="noBot">
          <el-input v-model="name" placeholder="搜索选手姓名、手机号" @input="$forceUpdate()">
            <el-button slot="append" icon="el-icon-search" @click="getPlayers()"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item class="noBot">
          <el-dropdown @command="handleCommand" :hide-on-click="false">
            <el-button type="text" icon="el-icon-upload">导入成绩</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">
                <!-- <el-link :underline="false" downlad="模板" target="_blank" href="./execl/model.xls">
                  <el-button type="text">导出模板</el-button>
                </el-link>-->
                <a href="./execl/endModel.xls" download="成绩导入模板">导出模板</a>
              </el-dropdown-item>
              <el-dropdown-item command="b">
                <el-button type="text">导入成绩</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item class="noBot">
          <el-button type="text" icon="el-icon-upload" @click="portData">导出名单</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="playersList.slice((currP-1)*PageS,currP*PageS)"
        style="width: 100%"
        ref="table"
      >
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80"></el-table-column>
        <el-table-column prop="entryNumber" label="参赛号" width="150"></el-table-column>
        <el-table-column prop="grade" label="成绩"></el-table-column>
        <el-table-column prop="length" label="距离"></el-table-column>
        <el-table-column prop="rank" label="总排" width="80"></el-table-column>
        <el-table-column prop="sexRank" label="性别排名" width="80"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="{row}">
            <el-button type="danger" icon="el-icon-delete" circle @click="delP(row.id)"></el-button>
            <el-button type="text" circle @click="toogleExpand(row)">查看分段成绩</el-button>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            分段成绩
            <!-- <el-table lazy :data="props.row.cardCon" v-loading="props.row.cardLoad">
              <el-table-column prop="cpName" label="打卡点"></el-table-column>
              <el-table-column prop="cpLength" label="里程"></el-table-column>
              <el-table-column prop="cpStartTime" label="打卡时间"></el-table-column>
              <el-table-column prop="useTime" label="区间用时"></el-table-column>
              <el-table-column prop="speed" label="配速"></el-table-column>
              <el-table-column prop="cpRank" label="排名"></el-table-column>
            </el-table>-->
            <table style="width: 100%" v-loading="props.row.cardLoad">
              <tr>
                <th>打卡点</th>
                <th>里程</th>
                <th>打卡时间</th>
                <th>区间用时</th>
                <th>配速</th>
                <th>排名</th>
              </tr>
              <tr v-for="v,i in props.row.cardCon" :key="i">
                <td>{{v.cpName}}</td>
                <td>{{v.cpLength}}</td>
                <td>{{v.cpStartTime}}</td>
                <td>{{v.useTime}}</td>
                <td>{{v.speed}}</td>
                <td>{{v.cpRank}}</td>
              </tr>
            </table>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="currP"
        :page-size="PageS"
        layout="prev, pager, next, jumper"
        :total="playersList.length"
      ></el-pagination>
    </el-row>
    <el-dialog title="导入成绩" :visible.sync="showUp">
      <el-form>
        <el-form-item label="选择组别：" required>
          <el-select v-model="upData.groupId" placeholder="请选择组别">
            <template v-for="(v,i) in groupArr">
              <el-option :key="i" :label="v.name" :value="v.id" v-if="v.id!=0"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-upload
          :action="upUrl"
          :on-success="upSuccess"
          :before-upload="beforeUpload"
          :show-file-list="false"
          :data="upData"
        >
          <el-button type="primary">导入成绩</el-button>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var stateArr = [
  { name: "完赛", state: "完赛" },
  { name: "DNS", state: "DNS" },
  { name: "DNF", state: "DNF" },
];
var sexArr = [
  { name: "全部", val: "" },
  { name: "男", val: "M" },
  { name: "女", val: "F" },
];
import table2excel from "js-table2excel";
export default {
  data() {
    return {
      currP: 1,
      PageS: 10,
      sex: "",
      sexArr,
      playersList: [],
      groupArr: [],
      gId: 0,
      state: "完赛",
      stateArr,
      name: "",
      upUrl: this.$url + "/sbr/upload/matchPersonGrade",
      showUp: false,
      upData: { matchId: "", groupId: "" },
    };
  },
  methods: {
    // 导入成绩下拉
    handleCommand(command) {
      // this.$message("click on item " + command);
      if (command == "b") this.showUp = true;
    },
    beforeUpload(file) {
      this.upData.matchId = this.$Base64.decode(
        sessionStorage.getItem("MandA")
      );
      if (!this.upData.groupId) {
        this.$message.error("请选择组别");
        return false;
      }
    },
    upSuccess(res, file) {
      // this.getPlayers()
      // console.log(res.data)
      this.showUp = false;
      this.$message.success("导入成功");
      this.getPlayers();
    },
    // 获取赛项
    getGroupArr() {
      this.$axios
        .get("/sbr/match/getMatchInfos/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data;
          this.gId = rr.matchInfoLists[0].id;
          this.groupArr = rr.matchInfoLists;
          this.getPlayers();
        });
    },
    // 获取名单 成绩
    getPlayers() {
      let oo = {
        matchId: this.$Base64.decode(sessionStorage.getItem("MandA")),
        groupId: this.gId,
        state: this.state,
        name: this.name,
        sex: this.sex,
      };
      this.playersList = [];
      this.$axios
        .get("/sbr/match/getGradeFinallData", { params: oo })
        .then((res) => {
          let rr = res.data.data;
          this.playersList = rr;
        });
    },
    // 导出
    portData() {
      let column = [
        {
          title: "姓名",
          key: "name",
          type: "text",
        },
        {
          title: "性别",
          key: "sex",
          type: "text",
        },
        {
          title: "参赛号",
          key: "entryNumber",
          type: "text",
        },
        {
          title: "成绩",
          key: "grade",
          type: "text",
        },
        {
          title: "距离",
          key: "length",
          type: "text",
        },
        {
          title: "总排名",
          key: "rank",
          type: "text",
        },
        {
          title: "性别排名",
          key: "sexRank",
          type: "text",
        },
      ];
      let gName = this.groupArr.find((v) => {
        return v.id == this.gId;
      }).name;
      // let filename = gName;
      // if (filename.indexOf(".") != Number(-1)) {
      //   filename =
      // }
      table2excel(column, this.playersList, gName + "成绩表.xls");
    },
    // 删除单个成绩
    delP(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该条成绩, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("/sbr/match/delGradeFinallData?id=" + id)
            .then((res) => {
              this.getPlayers();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 展开行 查看分段成绩
    toogleExpand(row) {
      // let $table = this.$refs.table;
      // $table.toggleRowExpansion(row);
      // row.expanded = !row.expanded;
      if (!row.expanded) {
        row.cardLoad = true;
        row.cardCon = [];
        this.$axios
          .get("/sbr/match/getGradeInfoByMemberId?id=" + row.memberId)
          .then((res) => {
            let rr = res.data.data;
            row.cardCon = rr.list;
            row.cardLoad = false;
            let $table = this.$refs.table;
            $table.toggleRowExpansion(row);
            row.expanded = !row.expanded;
            this.$forceUpdate();
          });
      } else {
        let $table = this.$refs.table;
        $table.toggleRowExpansion(row);
        row.expanded = !row.expanded;
      }
    },
  },
  created() {
    this.getGroupArr();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */

.pageWrap >>> .el-table__expand-column {
  display: none;
}
.noBot {
  margin-bottom: 0;
}
.conmsg {
  margin-top: 15px;
}
.span {
  padding: 0 12px;
  line-height: 25px;
  display: inline-block;
  cursor: pointer;
  margin-right: 6px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid transparent;
}
.span.active {
  border-color: #409eff;
  border-radius: 12px;
  color: #409eff;
}
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.jtimg {
  width: 100px;
}
</style>